<template>
	<div>
		<divider class="m_top50" style="font-size:16px;">基本信息</divider>
        <!-- 基本信息 -->
        <div class="box">
            <x-input name="username" placeholder="请输入真实姓名" is-type="china-name"></x-input>
        </div>
        <div class="box">
            <x-input name="username" placeholder="请输入身份证号" :min="15" :max="18" ></x-input>
        </div>
		<divider class="m_top50" style="font-size:16px;">运营商信息</divider>
        <div class="box">
            <x-input placeholder="请输入手机号码" mask="999 9999 9999" v-model="maskValue" :max="13" is-type="china-mobile"></x-input>
        </div>
        <div class="box">
            <x-input type="text" placeholder="请输入运营商密码" v-model="password" :min="6" :max="6" @on-change="change1"></x-input>
        </div>
        <div class="box">
            <x-input type="text" placeholder="请输入手机验证码" v-model="code" :min="6" :max="6" @on-change="change2">
                <x-button :disabled="disable001" @click.native="processButton001" :class="disable001?'yse4':'yes2'" slot="right" type="default" mini>发送验证码</x-button>
            </x-input>
        </div>
        <div style="width:70%;margin:auto;padding:15px;text-align:left;">
            <check-icon :value.sync="demo1"></check-icon>我同意
            <span style="color:#1D62F0;cursor:pointer;" @click="showDialog()">《XXX注册授权协议》</span>
        </div>
        <div v-transfer-dom>
            <x-dialog v-model="showBox" class="dialog-demo">
                <p class="dialog-title">授权协议</p>
                <div class="img-box" style="padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
                    <p style="padding:10px;">
                        本授权协议（以下简称“本协议”）是腾讯创业服务平台（以下简称“平台”或“腾讯”）、财付通支付科技有限公司（以下简称“财付通”）与用户（以下或称为“您”）就使用财付通支付服务所涉及的授权事宜在深圳市南山区所订立的协议。您通过网络页面点击确认或以其他方式选择接受本协议，即表示您与平台、财付通已达成协议并同意接受本协议的全部约定内容。
                        您应认真阅读、充分理解本规则各条款，特别是其中与您的权益有或可能具有重大关系的条款，及对平台、财付通具有或可能具有免责或限制责任的条款（尤其是粗体字部分）。如您不同意接受本协议的任意内容，或者无法准确理解相关条款含义的，请不要进行后续操作。如果您对本协议的条款有疑问的，请拨打客服电话（财付通：95017 ）进行询问，客服将向您解释条款内容。
                        为了更好地为您提供财付通支付服务，就您已经支付到财付通备付金账户的待结算资金，您认可并授权平台有权代您向财付通提交支付指令，将您的待结算资金从财付通备付金账户划转至商户银行账户，如因平台指令错误，由此产生的一切纠纷及法律责任由您及平台承担，与财付通无关。
                        您同意，平台或财付通有权随时对本协议内容进行单方面的变更，并在平台网站页面通知您。
                    </p>
                </div>
                <div>
                    <span class="vux-close" @click="hideDialog1()"></span>
                </div>
            </x-dialog>
        </div>
        <!-- 按钮 -->
        <div style="width:100%;margin:20px auto 50px;">
            <x-button @click.native="showLoading" type="default" class="yes3" style="width:80%;">下一步</x-button>
        </div>
	</div>
</template>
<script>
import {
  Divider,
  XInput,
  XButton,
  TransferDomDirective as TransferDom,
  XDialog,
  Radio,
  Group,
  CheckIcon
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Divider,
    XInput,
    XButton,
    XDialog,
    Radio,
    Group,
    CheckIcon
  },
  data() {
    return {
      maskValue: "",
      show1: false,
      nextnext: "下一步",
      showBox: false,
      demo1: false,
      //   参数
      code: "",
      password: "",
      disable001: false
    };
  },
  methods: {
    processButton001() {
      this.submit001 = "processing";
      this.disable001 = true;
      setTimeout(() => {
        this.disable001 = false;
      }, 5000);
    },
    showDialog() {
      this.showBox = true;
    },
    hideDialog1() {
      this.showBox = false;
    },
    showLoading() {
      const loading = this.$loading({
        lock: true,
        text: "正在申请",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
        location.href = "#/theFirstStep";
      }, 2000);
    },
    // 上一步
    last() {
      location.href = "#/verifyPhone";
    },
    // 下一步
    next() {
      location.href = "#/theFirstStep";
    },
    change1(value) {
      console.log(value);
    },
    change2(value) {
      console.log(value);
    }
  },
  mounted() {
    document.title = "基本信息";
    console.log(this.active);
  }
};
</script>
<style lang="less" scoped>
.btn_wrap {
  padding: 0 1rem;
  margin-top: 2rem;
}

.m_top50 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;
}

.vux-step-item-with-tail {
  height: 70px;
}

.el-step__main {
  margin-left: -5px !important;
}

.vux-close {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 24px;
  height: 24px;
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 24px;
    height: 1px;
    background-color: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }
}

.yes {
  color: #000 !important;
  background-color: #fff;
}
.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    padding-top: 10px;
    font-size: 20px;
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.vux-close {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 24px;
  height: 24px;
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 24px;
    height: 1px;
    background-color: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }
}

.bodybody {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-image: url(../../image/logo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  width: 70%;
  text-align: center;
  margin: 20px auto 20px;
}
.weui-cell {
  border: 1px solid #ddd;
}
.yes3 {
  color: #fff;
  background-color: #1f5aa0;
}
.yes2 {
  color: #000;
  background-color: lightseagreen;
}
.yes4 {
  color: #000;
  background-color: #eee;
}
</style>
